<script setup>
import { ref, reactive, toRefs, computed } from 'vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
import Table from '@/components/Table/index.vue';
import ComponentColumn from '@/components/ComponentColumn/index.vue';
const total = ref(20);
const queryRef = ref();
const dateRange = ref([]);
const columns = computed(() => [
  {
    label: t('om.MailingComponents'),
    prop: 'model',
    type: 'img',
    width: '462px',
  },
  {
    label: t('om.Stockpile'),
    prop: 'item',
  },
  {
    label: t('om.Lastupdatedtime'),
    prop: 'createBy',
  },
  {
    label: t('om.Valueofgoods'),
    prop: 'brand',
  },
  {
    label: t('om.Operate'),
    fixed: 'right',
    type: 'btn',
    width: '186px',
  },
]);
const tableData = [
  {
    id: 1,
    model: 'VR37000003305FA100',
    item: '6',
    brand: 'yageo',
    parameter: '0402 1nF ±10% 50V X7R',
    components: 'FR-4',
    dosage: 'FR-4',
    stock: ' 总共：1000',
    notes: '$ 100.20',
  },
];
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    orderNo: undefined,
  },
});
const { queryParams } = toRefs(data);

/** 重置按钮操作 */
function resetQuery(queryRef) {
  dateRange.value = [];
  if (!queryRef) return;
  queryRef.resetFields();
  queryParams.value.pageNum = 1;
}
</script>
<template>
  <div class="table-wrap">
    <Table
      v-loading="loading"
      :data="tableData"
      :columns="columns"
      serial
      :serialOptions="{ pageNum: queryParams.pageNum, pageSize: queryParams.pageSize }"
    >
      <template #imgSlot="{ scope }">
        <!-- 推荐元件 -->
        <component-column :row="scope.row" />
      </template>
      <template #btnSlot="{ scope }">
        <el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">{{
          $t('om.ViewUpdateLog')
        }}</el-button>
      </template>
    </Table>
    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<style lang="scss" scoped>
.table-wrap {
  padding-top: 1px;
}
</style>
